// !#1
import { HashRouter as Router, Route, NavLink, Link } from 'react-router-dom'
import './App.css'
import FindMusic from './pages/FindMusic'
import MyMusic from './pages/MyMusic'
import MyFollow from './pages/MyFollow'
import NotFound from './pages/NotFound'

export default function App() {
  // !#2 HashRouter 包裹整个应用
  return (
    <Router>
      <nav className='navbar navbar-expand-lg navbar-light bg-light'>
        <div className='container'>
          <Link className='navbar-brand' to='/'>
            网易云
          </Link>
          <button
            className='navbar-toggler'
            type='button'
            data-bs-toggle='collapse'
            data-bs-target='#navbarSupportedContent'
            aria-controls='navbarSupportedContent'
            aria-expanded='false'
            aria-label='Toggle navigation'
          >
            <span className='navbar-toggler-icon'></span>
          </button>
          <div className='collapse navbar-collapse' id='navbarSupportedContent'>
            <ul className='navbar-nav me-auto mb-2 mb-lg-0'>
              {/* //!#3 指定 a 链接的 hash 地址 */}
              <li className='nav-item'>
                {/* 默认情况下，NavLink 的 to 属性是模糊匹配 */}
                {/* 当地址是 “/ 开头”的时候就会匹配，匹配就会应用激活的 class */}
                {/* 什么叫模糊匹配 */}
                {/* /mymusic */}
                {/* /mymusic/xxx 和 /mymusic 匹配 */}
                {/* /mymusic/xxx/yyyy 和 /mymusic 匹配 */}
                {/* /mymusicxxx 这可不叫 和 /mymusic 匹配 */}
                {/* //!加 exact 表示精确匹配，表示只有是 / 的时候才会匹配，添加激活的 class */}
                <NavLink className='nav-link' aria-current='page' to='/' exact>
                  发现音乐
                </NavLink>
              </li>
              <li className='nav-item'>
                <NavLink className='nav-link' aria-current='page' to='/mymusic'>
                  我的音乐
                </NavLink>
              </li>
              <li className='nav-item'>
                <NavLink
                  className='nav-link'
                  aria-current='page'
                  to='/myfollow'
                >
                  关注
                </NavLink>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <div className='container mt-3'>
        <div className='card'>
          <div className='card-body'>
            {/* //!#4 当 Link 组件 to 属性 和 Route 组件 path 属性匹配的时候会使用 component 组件 */}
            {/* 当访问 / 开头的就会被匹配，说白了能匹配任意地址 */}
            {/* 加 exact 表示精确匹配，表示只有是 / 的时候才会匹配，应用次组件 */}
            <Route path='/' component={FindMusic} exact />
            {/* 当访问以 /mymusic 开头的才会被匹配 */}
            <Route path='/mymusic' component={MyMusic} />
            {/* 当访问以 /myfollow 开头的才会被匹配 */}
            <Route path='/myfollow' component={MyFollow} />
            {/* //!没有加 path，表示都会匹配到次路由，并应用组件 */}
            <Route component={NotFound}></Route>
          </div>
        </div>
      </div>
    </Router>
  )
}
